<template>
  <div id="rightUp">
    <div class="centerTitle">
      <div class="asTitle">卫星网</div>
    </div>
    <div class="up">
      <div class="item" v-for="item in titleItem" :key="item.title">
        <!-- 小块块上的字体设置 -->
        <p class="ml-3 h-24 colorBlue fw-b fs-xxxxl">{{ item.title }}</p>
        <div class="dv-dig-flop ml-1 mt-10 pl-3">
          {{ item.number.number[0] }}
          <!-- <dv-digital-flop
            class="dv-dig-flop ml-1 mt-3 pl-3"
            :config="item.number"
          /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleItem: [
        {
          title: "天通卫星",
          number: {
            number: [120],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "铱星",
          number: {
            number: [18],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "海事",
          number: {
            number: [2],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "欧星",
          number: {
            number: [14],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
      ],
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: "centerRate1",
          tips: 60,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5",
              },
            },
          },
        },
        {
          id: "centerRate2",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad",
              },
            },
          },
        },
      ],
    };
  },
  components: {
    // CenterChart,
  },
};
</script>

<style lang="scss" scoped>
#rightUp {
  display: flex;
  height: 95%;
  flex-direction: column;
  .centerTitle {
    flex: 1;
    padding: 0.15vh 0.15vw;
    text-align: left;
    font-size: 2vw;
    font-weight: bold;
    .asTitle {
      padding-left: 2vw;
      padding-top: 2vh;
      // 使用相对位置让问题垂直居中
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .up {
    flex: 4;
    width: 95%;
    margin: 0.3vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .item {
      // border-radius: 0.08vh;
      padding-top: 0.8vh;
      margin-top: 0.8vh;
      width: 50%;
      text-align: center;
      .dv-dig-flop {
        font-size: 2vw;
      }
    }
  }
}
</style>
